<!--  -->
<template>
    <div style="background-color: #141414;">
        <div data-tauri-drag-region class="titlebar">
            <div data-tauri-drag-region style="
          margin-right: auto;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
          font-size: 10pt;
        ">

            </div>
            <div class="titlebar-button" id="titlebar-minimize">
                <el-icon>
                    <Minus />
                </el-icon>
            </div>
            <div class="titlebar-button" id="titlebar-maximize">
                <el-icon>
                    <Plus />
                </el-icon>
            </div>
            <div class="titlebar-button" id="titlebar-close">
                <el-icon>
                    <Close />
                </el-icon>
            </div>
        </div>
        <div style="height: 600px;overflow: auto;" class="p-4">

            <el-timeline>
                <el-timeline-item v-for="(o, i) in info" v-bind:key="i" :type="o.type" :timestamp="o.c1 + '-' + o.c2"
                    placement="top">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>{{ o.c1 }}</span>
                                <el-tag effect="dark" v-if="o.c1 == '翻译'">{{ o.c2 }}</el-tag>
                            </div>
                        </template>
                        <div v-html="getMdiText(o.t)" class="p-2"> </div>
                        <br>
                        <el-text>{{ o.s }}</el-text>
                    </el-card>
                </el-timeline-item>

            </el-timeline>
        </div>
    </div>
</template>

<script>
import { appWindow, WebviewWindow } from "@tauri-apps/api/window";
import { emit, listen } from '@tauri-apps/api/event'
import { getClient, ResponseType } from '@tauri-apps/api/http';
import MarkdownIt from 'markdown-it'
import mdKatex from '@traptitech/markdown-it-katex'
import hljs from 'highlight.js';
import "highlight.js/styles/atom-one-dark.min.css";
const mdi = new MarkdownIt({
    linkify: true,
    highlight(code, language) {
        const validLang = !!(language && hljs.getLanguage(language))
        if (validLang) {
            const lang = language ?? ''
            return highlightBlock(hljs.highlight(lang, code, true).value, lang)
        }
        return highlightBlock(hljs.highlightAuto(code).value, '')
    }
})
mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })

function highlightBlock(str, lang) {
    return `<pre class="pre-code-box"><div class="pre-code-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">复制代码</span></div><div class="pre-code"><code class="hljs code-block-body ${lang}">${str}</code></div></pre>`
}



export default {
    data() {
        return {
            info: [],
        };
    },

    components: {},

    computed: {},

    mounted() {
        document
            .getElementById("titlebar-minimize")
            .addEventListener("click", () => appWindow.minimize());
        document
            .getElementById("titlebar-maximize")
            .addEventListener("click", () => appWindow.toggleMaximize());
        document
            .getElementById("titlebar-close")
            .addEventListener("click", () => appWindow.close());
        this.init();
    },

    created() { },

    methods: {
        getMdiText(value) {
            return mdi.render(value)
        },
        getText(str) {
            // 在两个 ··· 之间提取的正则表达式
            const regex = /```(.*?)```/g;

            // 提取字符串并进行处理
            const extractedText = str.replace(regex, (match, group) => {
                // 使用 getMdiText 方法对提取的字符串进行处理
                const processedText = this.getMdiText(group);
                // 返回处理后的字符串
                return processedText;
            });

            return extractedText;
        },

        async init() {
            listen("v", (event) => {
                if (event.payload.data.c1 == "ChatGPT") {
                    console.log(event.payload.data)

                    const index = this.info.findIndex(item => item.id === event.payload.data.id);
                    if (index !== -1) {
                        // 找到匹配的元素
                        console.log(`数据在位置 ${index}`);
                        this.info[index] = event.payload.data;
                    } else {
                        // 没有找到匹配的元素
                        console.log('数据不存在');
                        this.info.unshift(event.payload.data);
                    }
                }
                else {
                    this.info.unshift(event.payload.data);
                }


            });
        }
    }
}

</script>
<style lang='scss' scoped>
.is-top {
    color: #fff !important
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>